'use strict';
import React, {Component, PropTypes} from 'react';
import { connect } from 'react-redux';
import { init, doLogout,showScrollToTopFloat, goTop,scrolledBottom } from '../reducers/app/actions';
import PageLoading from '../components/pageLoading/PageLoading.jsx';
import {ReactExternalLoader} from "../components/common/ReactExternalLoader.jsx";
import TopNav from '../components/topNav/TopNav.jsx';
import SiderBar from '../components/siderBar/SiderBar.jsx';
import Properties from '../../../config/properties';
import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'
import './main.less';
import { Spin } from 'antd';

class Screen extends Component {
    constructor( props ) {
        super( props );
        this.state = {
            loaded:false
        };
    }

    componentDidMount() {
        this.props.init();
    }
    componentDidUpdate(){

    }
    onLoadedRes(){
        this.setState({
            loaded:true
        });
    }
    render() {
        if( !this.props.app.inited ) return <PageLoading />;
        const { pathname } = this.props.location;
        const children = React.cloneElement(this.props.children || <span />, { key: pathname });
        return (
            <Spin spinning={this.props.common.loading}>
                {
                    !this.state.loaded ?
                        <ReactExternalLoader
                            srcArray={[]}
                            onLoad={::this.onLoadedRes} >
                            <span />
                        </ReactExternalLoader> :
                        <span>
                            <TopNav {...{location:this.props.location,doLogout:this.props.doLogout} }/>
                            <span>
                                <div className="mainContainer" ref="mainContainer" onScroll={::this.onScroll}>
                                    { children }
                                </div>
                            </span>
                        </span>
                }
            </Spin>
        )
    }
    onScroll(e){

    }
}
Screen.propTypes = {
    location: PropTypes.object
};

//Screen.contextTypes = {
//    router: PropTypes.object.isRequired,
//};

export default connect(
    state =>{
        return {
            app: state.app,
            common: state.common,
        };
    },
    dispatch => {
        return {
            init: ()=>{ dispatch( init() ) },
            doLogout: ()=> { dispatch( doLogout() )},
            //showScrollToTopFloat: (visible)=> { dispatch( showScrollToTopFloat(visible) )},
            //goTop: (flag) => dispatch(goTop(flag)),
            //scrolledBottom: (isScrolledBottom)=>{dispatch(scrolledBottom(isScrolledBottom))}
        }
    }
)(Screen);

